<template>
	<view class="container">
		<!--头部 -->
		<view class="headerContainer">
			<!--搜索部分 -->
			<view class="searchItem">
				<u-search shape="round" :height="searchObj.height" :input-align="searchObj.inputAlign"
					:show-action="searchObj.showAction" placeholder="请输入姓名或手机号" @search="onSearch"
					v-model="searchObj.value"></u-search>
			</view>
			<view class="" style="width: 750rpx;position: relative;">
				<picker :value="dropDownObj[0].value" @change="changeSortField"
					:range-key="'label'"
					:range="dropDownObj[0].options">
					<view class="sortWrapper">
						{{dropDownObj[0].options[dropDownObj[0].value].label}}
						<u-icon color="#1777ff" name="arrow-right"></u-icon>
					</view>
				</picker>
				
				<view class="selected" @click="onShowSelectAll">
					<image class="icon" src="../../../static/image/icon_select.png" mode=""></image>
					筛选
				</view>
			</view>


			<view class="bottomWrapper">
				<view class="left">
					顾客总数
					<text class="tag">{{cardObj.total}}</text>人
				</view>
				<view class="right">
					<view v-if="isChannel" class="recordWrapper" @click="gotoReportLog">
						报备记录
					</view>

					<view v-if="shopInfo.addCustomerManual" class="addWrapper" @click="onPopupAddCustomer">
						<u-icon 
							:size="'20rpx'"  
							color="#1777ff" 
							style="margin-right: 10rpx;"
							name="plus">
						</u-icon>
						客户报备
					</view>
				</view>
			</view>
		</view>
		<view v-if="dataLoading" style="display: flex;align-items: center;justify-content: center">
			<u-loading-page :loading="dataLoading"
				iconSize="40rpx"
				fontSize="28rpx"
				></u-loading-page>
		</view>
		<view class="scrollviewContainer" v-if="cardObj.total==0&&!dataLoading">
			<u-empty style="padding-top: 300rpx" text="数据为空"
				:width="'400rpx'"
				icon="/static/image/icon_empty_list.png"
				textSize="28rpx"
				mode="data"></u-empty>
		</view>
		<template v-else>
			<!-- 渠道用户列表-->
			<view v-if="isChannel"  class="scrollviewContainer" >

				<template v-for="(card, cardIndex) in cardObj.list">
					<view class="namecardContainer" :key="card.id" @click="gotoChannelCustomerDetail(card)">
						<!-- 渠道才会显示用户报备过期或者无效 -->
						<view v-if="card.status==1||card.status==2" class="tagWrapper">
							{{card.status==1?"无效":"过期"}}
						</view>
						<!-- 渠道才会显示用户报备无效,不显示 -->
						<view v-if="card.status!=1" class="stepContainer">
							<view class="stepWrapper">
								<template v-for="(item, index) in visitorStatusList">
									<view :key="index" class="dropWrapper"
										:class="index<=card.visitorStatusId?'dropWrapperEn':'dropWrapperDis'">
										<view class="text" :class="index<=card.visitorStatusId?'textEn':'textDis'">
											{{item.name}}
										</view>
									</view>

									<view v-if="!item.end"
										:class="index<card.visitorStatusId?'lineWrapperEn':'lineWrapperDis'">
									</view>
								</template>
							</view>
						</view>
						<view class="updateAllPhone">
							<view class="left">
							</view>
							<view class="right" style="height: 50rpx;margin-top: 10rpx;">
								<view class="phoneContainer">
									{{card.phone}}
								</view>
								<view v-if="card.status==2" class="updatePhoneBtnWrapper"
									@click.stop="updateChannelReportTime(card)">
									报备
								</view>
								<view v-else-if="!card.hasAllPhoneNumber" class="updatePhoneBtnWrapper"
									@click.stop="onShowUpdateAllPhoneNum(card)">
									补全
								</view>
							</view>
						</view>


						<view class="top" style="margin-top: 10rpx;">
							<view class="left" style="font-size: 24rpx;">
								<image class="avatar" :src="card.avatar||'/static/img/user_img_ntx.png'" mode="">
								</image>
								<view class="wrapper">
									<view class="name">
										{{card.name||''}}
										<template v-if="card.sex<2">
											<span style="margin-left: 10rpx"></span>
											{{sexList[card.sex]}}
										</template>
									</view>
									<view style="font-size: 22rpx;" v-if="card.salesmanName&&card.salesmanName.length>0" class="name">
										置业顾问：
										<text class="myText">
											{{card.salesmanName}}
										</text>
									</view>
									<view v-if="card.allocateSource!=null&&'sys_allocate'==card.allocateSource"
										class="name">
										旧顾问：
										<text class="myText">
											{{card.lastSalesmanName||''}}
										</text>
									</view>
									<template v-if="card.customerStatusLogs.length>0">
										<view class="firstWrapper text-2line-ellipsis">
											最新动态：{{card.customerStatusLogs[0].createTime}}
										</view>
										<view class="firstWrapper">
											【{{card.customerStatusLogs[0].statusTitle}}】
										</view>
									</template>
								</view>
							</view>
						</view>

						<view class="bntWrapper">
							<view v-if="card.phone&&card.phone.length>0" class="leftBtn"
								@click.stop="gotoPhone(card.phone)">
								<image class="icon" src="../../../static/image/icon_visitor_tel.png" mode=""></image>
								打电话
							</view>
						</view>

					</view>
				</template>
				<view class="" style="height: 300rpx;">

				</view>
			</view>
			<!-- 置业顾问用户列表-->
			<view v-else  class="scrollviewContainer" >

				<template v-for="(card, cardIndex) in cardObj.list">
					<view class="namecardContainer" :key="card.id" @click="gotoCustomerDetail(card)">
						<view v-if="card.status==1" class="tagWrapper">
							无效
						</view>
						<view class="stepContainer">
							<view class="stepWrapper">
								<template v-for="(item, index) in visitorStatusList">
									<view :key="index" class="dropWrapper"
										:class="index<=card.visitorStatusId?'dropWrapperEn':'dropWrapperDis'">
										<view class="text" :class="index<=card.visitorStatusId?'textEn':'textDis'">
											{{item.name}}
										</view>
									</view>

									<view v-if="!item.end"
										:class="index<card.visitorStatusId?'lineWrapperEn':'lineWrapperDis'">
									</view>
								</template>
							</view>
						</view>
						<view class="updateAllPhone">
							<view class="left" style="font-size: 24rpx;">
							</view>

							<view class="right">
								<view class="phoneContainer">
									{{card.phone||"待授权"}}
								</view>
								<view v-if="!card.hasAllPhoneNumber" class="updatePhoneBtnWrapper"
									@click.stop="onShowUpdateAllPhoneNum(card)">
									补全
								</view>
							</view>
						</view>


						<view class="top" style="margin-top: 10rpx;">
							<view class="left">
								<image class="avatar" :src="card.avatar||'/static/img/user_img_ntx.png'" mode="">
								</image>
								<view class="wrapper">
									<view class="name">
										{{card.name||''}}
										<text style="color: #f00;" v-if="isSeller">
                      ({{card.customerSource}})
										</text>
										<template v-if="card.sex<2">
											<span style="margin-left: 10rpx"></span>
											{{sexList[card.sex]}}
										</template>

										<span v-if="!(isReferrer||isChannel)&&card.protectDay&&card.protectDay>=0"
											style="margin-left: 10rpx">保护期剩{{card.protectDay}}天</span>
										<span style="margin-left: 10rpx"
											v-if="!(isReferrer||isChannel)&&card.protectDay&&card.protectDay<0">已过保护期{{0-card.protectDay}}天</span>
									</view>
									<view v-if="(card.salesmanId != sellerObj.uuid)&&card.salesmanName&&card.salesmanName.length>0" class="name">
										置业顾问：
										<text class="myText">
											{{card.salesmanName}}
										</text>
									</view>
									<view v-if="card.allocateSource!=null&&'sys_allocate'==card.allocateSource"
										class="name">
										旧顾问：
										<text class="myText">
											{{card.lastSalesmanName||''}}
										</text>
									</view>
									<view class="scanCount">
										<span style="margin-right: 30rpx"
											v-if="!(isReferrer||isChannel)&&card.referrerName">推荐人：{{card.referrerName}}</span>访问{{card.viewTimes}}次
									</view>
									<view class="firstWrapper"
										v-if="card.firstUserLogText&&card.firstUserLogText.length>0">
										首次访问：{{card.firstUserLogText}}
									</view>
								</view>
							</view>
						</view>
						<view class="middle" style="font-size: 24rpx;">
							<view class="left">
								<!-- <view>{{allocateSourceList[card.allocateSource]}}</view> -->
								<view>{{intentionList[card.intention]}}</view>
								<view class="followTag" v-if="!(isReferrer||isChannel)">{{card.followTab}}</view>
							</view>
							<view class="right text-2line-ellipsis" style="font-size: 24rpx;" v-if="card.lastUserLogText.length">
								最近访问：{{card.lastUserLogText||''}}
							</view>
						</view>
						<template v-if="isChannel&&card.customerStatusLogs&&card.customerStatusLogs.length>0">
							<view class="" style="width: 100%;background-color: #dddddd;height: 1px;margin-top: 10px;">
							</view>
							<view class="channelInfoWrapper" style="font-size: 24rpx;line-height: 40rpx;" @click.stop="gotoChannelCustomerDetail(card)">
								<view class="left">
									<view class="">
										{{card.customerStatusLogs[0].channel?'报备渠道':'置业顾问'}}：{{card.customerStatusLogs[0].operator||""}}
									</view>
									<view class="">
										最新动态：【{{card.customerStatusLogs[0].statusTitle}}】
									</view>
									<view class="" style="margin-left: 150rpx;">
										{{card.customerStatusLogs[0].createTime}}
									</view>
								</view>
								<u-icon name="arrow-right" color="#666" size="40"></u-icon>
								<!-- <image class="right" src="../../../static/image/btn_more.png" mode=""></image> -->
							</view>
						</template>

						<view class="bntWrapper">
							<view v-if="isSeller" class="leftBtn" style="border-color: red;color: red"
								@click.stop="toMarkInvalid(card.id)">
								<image class="icon" src="../../../static/image/delete.png" mode=""></image>
								删除
							</view>
							<view v-if="!(isReferrer||isChannel)&&card.referrerPhone" class="leftBtn"
								@click.stop="gotoPhone(card.referrerPhone)">
								<image class="icon" src="../../../static/image/icon_visitor_tel.png" mode=""></image>
								联系经纪人
							</view>
							<view v-if="(isReferrer||isChannel)&&card.salesmanPhone" class="leftBtn"
								@click.stop="gotoPhone(card.salesmanPhone)">
								<image class="icon" src="../../../static/image/icon_visitor_tel.png" mode=""></image>
								联系顾问
							</view>
							<view v-if="card.phone&&card.phone.length>0" class="leftBtn"
								@click.stop="gotoPhone(card.phone)">
								<image class="icon" src="../../../static/image/icon_visitor_tel.png" mode=""></image>
								联系客户
							</view>
						</view>

					</view>
				</template>
				<view class="" style="height: 150rpx;">

				</view>
			</view>

		</template>
		<!--筛选弹框 -->
		<popupNew v-model="isShowAllSelect" 
			mode="center" 
			zIndex="888"
			:border-radius="20">
			<view class="selectContainer">
				<u-icon :size="'30rpx'" @click="isShowAllSelect=false" name="close" class="popupCloseIconTopRight"></u-icon>
				<view class="header">
					全部筛选
				</view>
				<scroll-view scroll-y="true" style="height: 700rpx;width: 100%;margin-top: 20rpx;">
					<view class="" style="10rpx">

					</view>
					<view class="contentWraper">
						<view class="title">
							{{selectObj.info.title}}
						</view>
						<view class="content">
							<view @click="onPhoneSelect" class="item" :class="{itemEn:selectObj.phoneSelect}">
								留电话
							</view>
							<view @click="onAvatarSelect" class="item" :class="{itemEn:selectObj.avatarSelect}">
								有头像
							</view>

							<view @click="onVisitedSelect" class="item" :class="{itemEn:selectObj.visitedSelect}">
								已到访
							</view>
							<view @click="onVisitedTodaySelect" class="item"
								:class="{itemEn:selectObj.visitedTodaySelect}">
								今天已到访
							</view>
							<view @click="onVisited7daysSelect" class="item"
								:class="{itemEn:selectObj.visited7daysSelect}">
								七日已到访
							</view>
						</view>
					</view>
					<view v-if="manageUser" class="contentWraper">
						<view class="title">
							所属顾问
						</view>
						<view class="content">
							<view @click="onMineSelect" class="item" :class="{itemEn:selectObj.mineSelect}">
								我的客户
							</view>
							<picker :value="[salesmanSelect]" 
								:range-key="'label'"
								:range="salesmanList" 
								@change="onConfirmSalesman">
								<view  class="item" 
									style="width: 200rpx;"
									:class="{itemEn:selectObj.otherSelect}">
									{{selectObj.otherSelect?selectSalesman.name:"选择顾问"}}
								</view>
							</picker>
						</view>
					</view>
					<view class="contentWraper">
						<view class="title">
							{{selectObj.intent.title}}
						</view>
						<view class="content">
							<view v-for="(item,index) in selectObj.intent.list" :key="index"
								@click="onIntentSelect(index)" class="item"
								:class="{itemEn:selectObj.intentSelect==index}">
								{{item}}
							</view>
						</view>
					</view>
					<view class="contentWraper">
						<view class="title">
							{{selectObj.time.title}}
						</view>
						<view class="content">
							<view v-for="(item,index) in selectObj.time.list" :key="index" @click="onTimeSelect(index)"
								class="item" :class="{itemEn:selectObj.daySelect==index}">
								{{item}}
							</view>
							<template v-if="selectObj.timeStart.length&&selectObj.timeEnd.length">
								<view class="item itemEn" style="width:220rpx;" @click="onShowCalendar">
									{{selectObj.timeStart}}
								</view>
								<view class="text">至</view>
								<view class="item itemEn" style="width:220rpx;" @click="onShowCalendar">
									{{selectObj.timeEnd}}
								</view>
							</template>

							<template v-else>
								<view class="item" style="width:220rpx;" @click="onShowCalendar">
									开始时间
								</view>
								<view class="text">至</view>
								<view class="item" style="width:220rpx;" @click="onShowCalendar">
									结束时间
								</view>
							</template>
						</view>


					</view>
					<view class="contentWraper">
						<view class="title">
							{{selectObj.protectDay.title}}
						</view>
						<view class="content">
							<view v-for="(item,index) in selectObj.protectDay.list" :key="index"
								@click="onPassProtectDaySelect(index)" class="item"
								:class="{itemEn:selectObj.protectDaySelect==index}">
								{{item}}
							</view>
						</view>
					</view>
					<view class="contentWraper">
						<view class="title">
							{{selectObj.followType.title}}
						</view>
						<view class="content">
							<view v-for="(item,index) in selectObj.followType.list" :key="index"
								@click="onPassFollowTypeSelect(index)" class="item"
								:class="{itemEn:selectObj.followTypeSelect==index}">
								{{item}}
							</view>
						</view>
					</view>
					<view class="" style="20rpx">

					</view>
				</scroll-view>

				<view class="btnWrapper">
					<view class="btn1" @click="onSelectRest">
						重置
					</view>
					<view class="btn2" @click="onSelectConfirm">
						确定
					</view>
				</view>
			</view>
		</popupNew>
		<u-calendar v-model="isShowCalendar" :mode="'range'" @change="changeCalendar"></u-calendar>

		<popupAddCustomer v-model="isShowAddCustomer" @success="onSuccessAddCustomer"></popupAddCustomer>

		<popupUpdateCustomerPhone v-model="isShowUpdateAllPhoneNum" :phoneStart3="phoneStart3" :phoneEnd4="phoneEnd4"
			:customId="customId" @success="onSuccessAddCustomer"></popupUpdateCustomerPhone>

		<u-modal :show-cancel-button="true" v-model="markInvalidComfireModal" @confirm="onConfirmMarkInvalid"
			@cancel="onCancelMarkInvalid" content=""></u-modal>
	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	import dropdownNew from "../../../components/dropdownNew/index.vue"
	import UDropdown from "../../../components/dropdownNew/index";
	import popupAddCustomer from "../../../components/popupAddCustomer/index.vue";
	import popupUpdateCustomerPhone from "../../../components/popupUpdateCustomerPhone/index.vue";
	let timeId = null
	let that = null
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	const Config = require("@/config.js")
	const TAB_sortField = ['lastLoginTime', 'createTime', 'viewTimes', 'protectLimitDay', 'followTime', 'followTime',
		'result'
	];


	export default {
		computed: {
			...mapState({
				hasLogin: state => state.userInfo.hasLogin,
				isAuthPhone: state => state.userInfo.isAuthPhone,
				isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
				isSeller: state => state.userInfo.isSeller,
				isReferrer: state => state.userInfo.isReferrer,
				isChannel: state => state.userInfo.isChannel,
				sellerObj: state => state.userInfo.sellerObj,
				buyerObj: state => state.userInfo.buyerObj,
				shopInfo: state => state.userInfo.shopInfo,
			}),

		},
		data() {
			return {
				markInvalidComfireModal: false,
				dataLoading: true,
				salesmanSelect: "",
				manageUser: false,
				selectSalesman: {
					id: null,
					name: '请选择顾问',
					index: 0,
				},
				salesmanList: [],
				isShowAddCustomer: false,
				isShowAllSelect: false,
				isShowCalendar: false,
				isShowUpdateAllPhoneNum: false,
				phoneStart3: "",
				phoneEnd4: "",
				customId: "",

				intentionList: [
					'未知意向',
					'低意向',
					'中意向',
					'高意向',
					'必买',
					'已购买',
					'无意向'
				],
				sexList: ["女", "男", "未知"],

				visitorStatusList: [{
						key: 'NOT_VISITED',
						name: "未到访"
					},
					{
						key: 'VISITED',
						name: "到访"
					},
					{
						key: 'DEPOSIT',
						name: "认筹"
					},
					{
						key: 'ORDERED',
						name: "认购"
					},
					{
						key: 'DONE',
						name: "签约",
						end: true
					},
				],

				searchObj: {
					showAction: false,
					inputAlign: "center",
					value: "",
					height: 60,
				},
				sortObj: {
					sortField: 'lastLoginTime',
					sortOrder: 'desc',
				},

				backupCustomerItem: {},

				selectObj: {
					isSelect: false,
					phoneSelectBackup: false,
					avatarSelectBackup: false,
					visitedSelectBackup: false,
					visitedTodaySelectBackup: false,
					visited7daysSelectBackup: false,
					mineSelectBackup: false,
					otherSelectBackup: false,
					intentSelectBackup: -1,
					daySelectBackup: -1,
					timeStartBackup: '',
					timeEndBackup: '',
					phoneSelect: false,
					avatarSelect: false,
					mineSelect: false,
					otherSelect: false,
					visitedSelect: false,
					visitedTodaySelect: false,
					visited7daysSelect: false,
					intentSelect: -1,
					daySelect: -1,
					timeStart: 0,
					timeEnd: 0,
					protectDaySelect: -1,
					protectDaySelectBackup: -1,
					followTypeSelect: -1,
					followTypeSelectBackup: -1,
					info: {
						list: ['留电话', '有头像', '我的拓客', '已到访'],
						title: '用户群'
					},
					intent: {
						list: ['已购买', '必买', '高意向', '中意向', '低意向', '无意向', '未知意向'],
						title: '意向等级'
					},
					time: {
						list: ['今日', '近7日', '近30日'],
						title: '访问时间'
					},
					followType: {
						list: ['从未跟进', '今日已跟进', '今日未跟进'],
						title: '客户跟进'
					},
					protectDay: {
						list: ['已过保护期', '未过保护期'],
						title: '保护期'
					},

				},

				dropDownObj: [{
					value: 0,
					label: '最近访问时间倒序',
					options: [{
							label: '最近访问时间倒序',
							value: 0,
						},
						{
							label: '首次访问时间倒序',
							value: 1,
						},

						{
							label: '访问次数优先',
							value: 2,
						},
						{
							label: '保护期从少到多',
							value: 3,
						},
						{
							label: '跟进时间正序',
							value: 4,
						},
						{
							label: '跟进时间倒序',
							value: 5,
						},
						{
							label: '推测意向从高到低',
							value: 6,
						},
					],
				}],
				cardObj: {
					list: [],
					loadStatus: "loading",
					pageIndex: 1,
					curPageIndex: 0,
					total: 0,
				},
				headerContainerCss: {
					paddingTop: "120rpx"
				}
			};
		},

		components: {
			UDropdown,
			dropdownNew,
			popupAddCustomer,
			popupUpdateCustomerPhone
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			onShow: {
				type: Boolean,
				default: true,
			}
		},

		watch: {
			value: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						// this.setData({
						// 	selfShow: true
						// });
						_this.selfShow = true;
						_this.closeShow = false;
						setTimeout(() => {
							console.log("@@@@@closeshow")
							_this.closeShow = true;
						}, 2000);
					} else {
						// this.setData({
						// 	selfShow: false
						// });
						_this.selfShow = false;
					}
				},
				immediate: true
			},
			onShow: {
				handler: function observer(val) {
					var _this = this;
					if (val) {
						_this.refreshCustomerInfo()
					}
				},
				immediate: true
			},
		},
		mounted() {
			this.dataLoading = true
			this.clearListShow(this.cardObj)
			this.getCustomerList()

			for (var i = 0; i < this.shopInfo.tools.length; i++) {
				if ("minapp_manage_user" == this.shopInfo.tools[i].code) {
					that.manageUser = this.shopInfo.tools[i].isShow
				}
			}
		},
		created() {
			that = this

			let systemInfo = uni.getSystemInfoSync();	
			this.headerContainerCss.paddingTop = systemInfo.top + 'px'
			this.getSalesmanList()
		},

		methods: {
			onReachBottomRefresh(){
				console.log("onReachBottomRefresh")
				that.getCustomerList()
			},
			onScrolltolower() {
				// that.getCustomerList()
			},


			onSalesmanSelectShow() {
				this.salesmanSelect = true;
			},
			onConfirmMarkInvalid() {
				let that = this	
				let record = that.toMarkInvalidCustomerId
				api.markInvalid({
					interfaceName: record
				}).then(res => {
					let list = []
					that.cardObj.list.forEach(t => {
						if (t.id != record) {
							list.push(t)
						}
					})
					that.cardObj.list.splice(0, that.cardObj.list.length)
					that.cardObj.list = list
					that.cardObj.total = that.cardObj.total - 1
				})
			},
			onCancelMarkInvalid() {
				let that = this
				that.toMarkInvalidCustomerId = ""
			},
			toMarkInvalid(id) {
				let that = this
				that.toMarkInvalidCustomerId = id
				uni.showModal({
				    title: '提示',
				    content: '该用户将进入公池，并标识为无效用户，确定删除？' ,
				    showCancel: true,
				    success: function(res) {
				        if (res.confirm) {
				            that.onConfirmMarkInvalid()
				        } else if (res.cancel) {
							that.onCancelMarkInvalid()
				            console.log('用户点击取消');
				        }
				    }
				});
			},

			onConfirmSalesman(e) {
				let index =e.detail.value		
				let record = this.salesmanList[index]
				if (record.value == "clear"){
					that.selectObj.otherSelect = false
					that.selectObj.mineSelect = false
					this.selectSalesman = {
						id: "",
						name: "请选择顾问",
						index: index,
					}
				}else{
					that.selectObj.otherSelect = true
					that.selectObj.mineSelect = false
					this.selectSalesman = {
						id: record.value,
						name: record.label,
						index: index,			
					}
				}
			},
			
			salesamenReset() {
				this.selectSalesman = {
					id: null,
					name: '点击选择顾问'
				}
			},
			gotoReportLog() {
				uni.navigateTo({
					url: '/pages/shop/customer/reportLog'
				})
			},
			changeCalendar(e) {
				that.selectObj.daySelect = -1;
				that.selectObj.timeStart = e.startDate
				that.selectObj.timeEnd = e.endDate
				console.log(e);
			},
			onShowCalendar() {
				that.isShowCalendar = true;
			},

			onShowSelectAll() {
				that.selectObj.timeStart = that.selectObj.timeStartBackup;
				that.selectObj.timeEnd = that.selectObj.timeEndBackup;
				that.selectObj.avatarSelect = that.selectObj.avatarSelectBackup;
				that.selectObj.phoneSelect = that.selectObj.phoneSelectBackup;
				that.selectObj.intentSelect = that.selectObj.intentSelectBackup;
				that.selectObj.visitedSelect = that.selectObj.visitedSelectBackup;
				that.selectObj.visitedTodaySelect = that.selectObj.visitedTodaySelectBackup;
				that.selectObj.visited7daysSelect = that.selectObj.visited7daysSelectBackup;
				that.selectObj.mineSelect = that.selectObj.mineSelectBackup;
				that.selectObj.otherSelect = that.selectObj.otherSelectBackup;
				that.selectObj.daySelect = that.selectObj.daySelectBackup;
				that.selectObj.protectDaySelect = that.selectObj.protectDaySelectBackup;
				that.selectObj.followTypeSelect = that.selectObj.followTypeSelectBackup;
				that.isShowAllSelect = true;
			},

			onPhoneSelect() {
				that.selectObj.phoneSelect = !that.selectObj.phoneSelect
			},

			onAvatarSelect() {
				that.selectObj.avatarSelect = !that.selectObj.avatarSelect
			},
			onVisitedSelect() {
				that.selectObj.visitedSelect = !that.selectObj.visitedSelect
			},
			onVisitedTodaySelect() {
				that.selectObj.visitedTodaySelect = !that.selectObj.visitedTodaySelect
			},
			onVisited7daysSelect() {
				that.selectObj.visited7daysSelect = !that.selectObj.visited7daysSelect
			},
			onMineSelect() {
				that.selectObj.mineSelect = !that.selectObj.mineSelect
				if (that.selectObj.mineSelect) {
					that.selectObj.otherSelect = false
				}
			},
			onOtherSelect() {
				that.selectObj.otherSelect = !that.selectObj.otherSelect
				if (that.selectObj.otherSelect) {
					that.selectObj.mineSelect = false
				}
			},
			getSalesmanList(){
				api.getSalesmanList().then(res => {
					if (res.success){
						that.salesmanList.splice(0, that.salesmanList.length)
						let data = res.data;
						that.salesmanList.push({
							value: "clear",
							label: "清空"
						})
						data && data.forEach(item => {
							that.salesmanList.push({
								value: item.id,
								label: item.name
							})
						})
					}			
				})
			},
			

			onPassProtectDaySelect(index) {
				if (that.selectObj.protectDaySelect == index) {
					that.selectObj.protectDaySelect = -1
				} else {
					that.selectObj.protectDaySelect = index;
				}
			},
			onPassFollowTypeSelect(index) {
				if (that.selectObj.followTypeSelect == index) {
					that.selectObj.followTypeSelect = -1
				} else {
					that.selectObj.followTypeSelect = index;
				}
			},

			onIntentSelect(id) {
				if (that.selectObj.intentSelect == id) {
					that.selectObj.intentSelect = -1
				} else {
					that.selectObj.intentSelect = id
				}
			},

			onTimeSelect(id) {
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				if (that.selectObj.daySelect == id) {
					that.selectObj.daySelect = -1
				} else {
					that.selectObj.daySelect = id
				}
			},
			onSelectRest() {
				that.selectObj.isSelect = false;
				that.selectObj.timeStart = '';
				that.selectObj.timeEnd = '';
				that.selectObj.avatarSelect = false;
				that.selectObj.avatarSelectBackup = false;
				that.selectObj.visitedTodaySelect = false;
				that.selectObj.visitedTodaySelectBackup = false;
				that.selectObj.visited7daysSelect = false;
				that.selectObj.visited7daysSelectBackup = false;
				that.selectObj.visitedSelect = false;
				that.selectObj.visitedSelectBackup = false;
				that.selectObj.phoneSelect = false;
				that.selectObj.phoneSelectBackup = false;
				that.selectObj.mineSelect = false;
				that.selectObj.mineSelectBackup = false;
				that.selectObj.otherSelect = false;
				that.selectObj.otherSelectBackup = false;
				that.selectObj.intentSelect = -1;
				that.selectObj.intentSelectBackup = -1;
				that.selectObj.daySelect = -1;
				that.selectObj.protectDaySelect = -1;
				that.selectObj.protectDaySelectBackup = -1;
				that.selectObj.followTypeSelect = -1;
				that.selectObj.followTypeSelectBackup = -1;
				that.selectObj.timeStartBackup = '';
				that.selectObj.timeEndBackup = '';
				that.selectObj.daySelectBackup = -1;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
				that.isShowAllSelect = false;
			},
			onSelectConfirm() {
				that.selectObj.timeStartBackup = that.selectObj.timeStart;
				that.selectObj.timeEndBackup = that.selectObj.timeEnd;
				that.selectObj.avatarSelectBackup = that.selectObj.avatarSelect;
				that.selectObj.phoneSelectBackup = that.selectObj.phoneSelect;
				that.selectObj.mineSelectBackup = that.selectObj.mineSelect;
				that.selectObj.otherSelectBackup = that.selectObj.otherSelect;
				that.selectObj.visitedSelectBackup = that.selectObj.visitedSelect;
				that.selectObj.visitedTodaySelectBackup = that.selectObj.visitedTodaySelect;
				that.selectObj.visited7daysSelectBackup = that.selectObj.visited7daysSelect;
				that.selectObj.intentSelectBackup = that.selectObj.intentSelect;
				that.selectObj.protectDaySelectBackup = that.selectObj.protectDaySelect;
				that.selectObj.followTypeSelectBackup = that.selectObj.followTypeSelect;
				that.selectObj.daySelectBackup = that.selectObj.daySelect;

				if ((that.selectObj.timeStartBackup == '') &&
					(that.selectObj.timeEndBackup == '') &&
					(!that.selectObj.avatarSelectBackup) &&
					(!that.selectObj.phoneSelectBackup) &&
					(!that.selectObj.phoneSelectBackup) &&
					(!that.selectObj.mineSelectBackup) &&
					(!that.selectObj.otherSelectBackup) &&
					(!that.selectObj.visitedSelectBackup) &&
					(!that.selectObj.visited7daysSelectBackup) &&
					(!that.selectObj.visitedTodaySelectBackup) &&
					(that.selectObj.intentSelectBackup == -1) &&
					(that.selectObj.daySelectBackup == -1)
				) {
					that.selectObj.isSelect = false;
				} else {
					that.selectObj.isSelect = true;
				}

				that.isShowAllSelect = false;
				that.clearListShow(that.cardObj)
				that.getCustomerList()
			},


			gotoCustomerDetail(card) {
				//||this.isChannel==1
				if (!this.shopInfo.allowEditUser) {
					return;
				}
				if (this.isReferrer == 1) {
					return;
				}
				this.backupCustomerItem = card;
				uni.navigateTo({
					url: '/pages/shop/customer/customerDetail?id=' + card.id
				})
			},

			gotoChannelCustomerDetail(card) {
				this.backupCustomerItem = card;

				uni.navigateTo({
					url: '/pages/shop/customer/channelCustomerDetail?list=' + JSON.stringify(card
						.customerStatusLogs)
				})
			},


			refreshCustomerInfo() {
				let that = this
				if (that.backupCustomerItem && that.backupCustomerItem.id) {
					api.getCustomerDetail({
						interfaceName: that.backupCustomerItem.id,
						param: {}
					}).then(res => {
						console.log(res)
						if (res.success) {
							that.backupCustomerItem.status = res.data.status || 0
							that.backupCustomerItem.intention = res.data.intention || 0
							that.backupCustomerItem.name = res.data.name || ''
							that.backupCustomerItem.visitorStatus = res.data.visitorStatus || ""
							that.backupCustomerItem.visitorStatusId = 0;
							that.backupCustomerItem.followTab = res.data.followTab || '从未跟进';
							var status = that.backupCustomerItem.visitorStatus && JSON.parse(that
								.backupCustomerItem.visitorStatus) || ['']
							for (let j = 0; j < that.visitorStatusList.length; j++) {
								if (that.visitorStatusList[j].key == status[0]) {
									that.backupCustomerItem.visitorStatusId = j;
								}
							}
							that.backupCustomerItem.customerStatusLogs = res.data.customerStatusLogs
						}
					})
				}
			},

			gotoPhone(phone) {
				uni.makePhoneCall({
					// 手机号
					phoneNumber: phone,
					// 成功回调
					success: (res) => {
						console.log('调用成功!')
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			onSearch(e) {
				console.log("onTitleSearch:", );
				that.clearListShow(that.cardObj)
				that.getCustomerList();
			},


			getCustomerList() {
				let that = this
				console.log("getCustomerList:", 1);

				if (that.cardObj.curPageIndex != that.cardObj.pageIndex) {
					that.cardObj.curPageIndex = that.cardObj.pageIndex
					var NONE = ''
					
					if (!this.dataLoading){
						uni.showLoading({
							title:"加载中..."
						})	
					}
			

					var period = NONE
					if (that.selectObj.daySelectBackup >= 0) {
						var tab = [0, -7, -30]
						period = tab[that.selectObj.daySelectBackup]
					}

					var intention = NONE
					if (that.selectObj.intentSelectBackup >= 0) {
						var tab = [5, 4, 3, 2, 1, 6, 0]
						intention = tab[that.selectObj.intentSelectBackup]
					}
					console.log("getCustomerList", 2, that.selectSalesman, that.selectObj.otherSelectBackup)
					api.getCustomerList({
						param: {
							// salesmanId: "1470953159345164290",  //1470953159345164290  1470953159345164290
							limit: 10,
							page: that.cardObj.pageIndex,
							params: that.searchObj.value,
							sortBy: that.sortObj.sortField,
							hasAvatar: that.selectObj.avatarSelectBackup ? true : NONE,
							hasPhone: that.selectObj.phoneSelectBackup ? true : NONE,
							visited: that.selectObj.visitedSelectBackup ? true : NONE,
							visitedToday: that.selectObj.visitedTodaySelectBackup ? true : NONE,
							visited7days: that.selectObj.visited7daysSelectBackup ? true : NONE,
							mine: that.selectObj.mineSelectBackup ? true : NONE,
							salesmanId: that.selectObj.otherSelectBackup ? that.selectSalesman.id : NONE,
							intention: intention,
							period: period,
							protectDay: that.selectObj.protectDaySelectBackup == -1 ? NONE : that.selectObj
								.protectDaySelectBackup,
							followType: that.selectObj.followTypeSelectBackup == -1 ? NONE : that.selectObj
								.followTypeSelectBackup,
							beginLastLoginTime: that.selectObj.timeStartBackup.length > 0 ? that.selectObj
								.timeStartBackup : NONE,
							endLastLoginTime: that.selectObj.timeEndBackup.length > 0 ? that.selectObj
								.timeEndBackup : NONE,
							orderBy: that.sortObj.sortOrder || 'desc',
						}
					}).then(res => {
						console.log(res)
						if (res.code == 0) {

							that.pushListShow(that.cardObj, res.data)
							that.cardObj.total = res.count;
						}
					}).finally(t=>{
						if (!this.dataLoading){
							uni.hideLoading()
						}
						this.dataLoading = false				
					})
				}
			},
			/**
			 * @description: 列表中添加数据
			 * @param {number} id   u-tabs-swiper的当前ID
			 * @param {list}  列表
			 * @return void
			 */
			pushListShow(srcObj, pushlist) {
				if (pushlist && pushlist.length > 0) {
					for (let i = 0; i < pushlist.length; i++) {
						pushlist[i].intention = pushlist[i].intention || 0
						pushlist[i].allTimes = pushlist[i].allTimes || ''
						pushlist[i].date = pushlist[i].date || ''
						pushlist[i].avatar = pushlist[i].avatar || ''
						pushlist[i].nickname = pushlist[i].nickname || ''
						pushlist[i].sex = pushlist[i].sex || 2
						pushlist[i].aiIntention = pushlist[i].aiIntention || ''
						pushlist[i].visitorStatusId = 0;
						for (let j = 0; j < this.visitorStatusList.length; j++) {
							var status = pushlist[i].visitorStatus && JSON.parse(pushlist[i].visitorStatus) || ['']
							// console.log("visitorStatusList:", status[0])
							if (this.visitorStatusList[j].key == status[0]) {
								pushlist[i].visitorStatusId = j;
							}
						}

						if (pushlist[i].lastUserLog && pushlist[i].lastUserLog.createTime) {
							pushlist[i].lastUserLogText = pushlist[i].lastUserLog.createTime + ' ' + (pushlist[i]
								.lastUserLog.content || '');
						} else {
							pushlist[i].lastUserLogText = ""
						}

						if (pushlist[i].firstUserLog && pushlist[i].firstUserLog.createTime) {
							pushlist[i].firstUserLogText = pushlist[i].firstUserLog.createTime + ' ' + (pushlist[i]
								.firstUserLog.content || '');
						} else {
							pushlist[i].firstUserLogText = ""
						}

						if (pushlist[i].phone &&
							pushlist[i].phone.length == 11 &&
							/^\d+$/.test(pushlist[i].phone.slice(0, 3)) &&
							/^\d+$/.test(pushlist[i].phone.slice(7, 11)) &&
							pushlist[i].phone.slice(3, 7) == "****"
						) {
							pushlist[i].hasAllPhoneNumber = false
						} else {
							pushlist[i].hasAllPhoneNumber = true
						}
						//==去重
						for(var j in srcObj.list){
							if (srcObj.list[j].id == pushlist[i].id){
								srcObj.list.splice(j, 1)
							}
						}
						
						srcObj.list.push(pushlist[i])
					}
					srcObj.pageIndex++;

					if (pushlist.length == 10) {
						srcObj.loadStatus = "loadmore"
					} else {
						srcObj.loadStatus = "nomore"
					}
					console.log("srcObj:", srcObj)
				} else {
					srcObj.loadStatus = "nomore"
				}
			},

			//----清空列表
			clearListShow(srcObj) {
				srcObj.curPageIndex = 0;
				srcObj.total = 0;
				srcObj.pageIndex = 1;
				srcObj.list.splice(0, srcObj.list.length)
				this.dataLoading = true
			},


			gotoLottery(id) {
				uni.navigateTo({
					url: "/pages/client/lottery/index?id=" + id
				})
			},

			open(index) {
				// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
				// 同时内部会自动给当前展开项进行高亮
				this.$refs.uDropdown.highlight();
			},
			close(index) {
				// 关闭的时候，给当前项加上高亮
				// 当然，您也可以通过监听dropdown-item的@change事件进行处理
				this.$refs.uDropdown.highlight(index);
			},

			onSuccessAddCustomer() {
				that.dropDownObj[0].value = 1
				that.setSortField(1)
			},

			changeSortField(e) {
				let that = this
				let index = e.detail.value
				// 更多的细节，如有需要请自行根据业务逻辑进行处理
				that.setSortField(index)
			},
			
			setSortField(index){
				this.dropDownObj[0].value = index
				
				console.log("change:", index)
				this.sortObj.sortField = TAB_sortField[index];
				if (index === 3 || index === 4) {
					this.sortObj.sortOrder = 'asc'
				}
				that.clearListShow(that.cardObj)
				that.getCustomerList();
			},


			onPopupAddCustomer() {
				let that = this
				console.log("onPopupAddCustomer")
				that.isShowAddCustomer = true;
			},

			updateChannelReportTime(card) {
				let that = this
				api.updateChannelReportTime({
					param: {
						id: card.id
					}
				}).then(res => {
					console.log(res)
					if (res.success) {
						//刷新显示
						that.backupCustomerItem = card
						that.refreshCustomerInfo();
					}
				})
			},

			onShowUpdateAllPhoneNum(card) {
				console.log("onShowUpdateAllPhoneNum")
				if (card.phone && card.phone.length == 11) {
					if (/^\d+$/.test(card.phone.slice(0, 3)) &&
						/^\d+$/.test(card.phone.slice(7, 11)) &&
						card.phone.slice(3, 7) == "****"
					) {

						this.phoneStart3 = card.phone.slice(0, 3)
						this.phoneEnd4 = card.phone.slice(7, 11)
						this.customId = card.id

						this.isShowUpdateAllPhoneNum = true
						return;
					}
				}

			},
			getAppSource(key){
				var appSourceList ={
					wx: '(微信)',
					dy: '(抖音)',
					bd: '(百度)'
				}
				
				return appSourceList[key]||""
			}

		},
	}
</script>



<style lang="scss">
	.container {
		width: 100vw;
		background-color: #f3f3f3;
	}

	.scrollviewContainer {
		width: 100%;
		background-color: #f3f3f3;

		.aiIntention {
			margin-bottom: 10rpx
		}

		.vistorTag {
			margin-top: 5px;
			bottom: 0;
			left: 0;
			width: 108rpx;
			height: 44rpx;
			background-color: #44b7ff;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 18rpx;
				height: 18rpx;
				// margin-left: 5rpx;
			}
		}

		.followTag {
			margin-top: 5px;
			bottom: 0;
			left: 0;
			width: 108rpx;
			height: 44rpx;
			background-color: darkgray;
			border-radius: 10rpx;
			font-size: 21rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 18rpx;
				height: 18rpx;
				// margin-left: 5rpx;
			}
		}
	}

	.headerContainer {
		width: 750rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: #F3F3F3 solid 1px;
		padding-top: var(--status-bar-height);
		position: sticky;
		top: 0;
		left: 0;
		z-index: 886;
		.searchItem {
			margin-top: 30rpx;
			width: 600rpx;
			margin-bottom: 30rpx;
		}

		.selected {
			height: 80rpx;
			position: absolute;
			right: 30rpx;
			z-index: 12;
			top: 0rpx;
			display: flex;
			align-items: center;
			overflow-y: scroll;
			font-size: 26rpx;
			color: #888;
			.icon {
				height: 30rpx;
				width: 30rpx;
				margin-right: 15rpx;
			}
		}

		.selectedColorEn {
			color: #1890FF;
		}

		.bottomWrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 750rpx;
			margin-top: 20rpx;

			.left {
				height: 80rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				line-height: 80rpx;
				border-top: 1px #F3F3F3 solid;

				.tag {
					font-size: 35rpx;
					font-weight: bolder;
					margin: 0 15rpx;
					color: #1890FF;
				}
			}

			.right {
				display: flex;
				align-items: center;

				.recordWrapper {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-right: 30rpx;
					background-color: #1890FF;
					color: #ffffff;
					height: 60rpx;
					padding: 0 20rpx;
					border-radius: 30rpx;
				}

				.addWrapper {
					height: 45rpx;
					padding: 0 20rpx;
					border-radius: 30rpx;
					border: #1890FF 1px dotted;
					display: flex;
					align-items: center;
					font-size: 24rpx;
					margin-right: 30rpx;
					color: #1890FF;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}
			}

		}
	}

	.selectContainer {
		width: 650rpx;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 20rpx;
		align-items: center;
		height: 1000rpx;
		position: relative;
		.header {
			padding: 20rpx;
			width: 100%;
			color: #333333;
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			border-bottom: solid 1px #f8f8f8;
		}

		.contentWraper {
			width: 100%;
			margin-bottom: 40rpx;

			.title {
				margin-left: 20rpx;
				color: #333333;
				font-weight: bold;
				font-size: 30rpx;
			}

			.content {
				display: flex;
				flex-wrap: wrap;
				align-items: center;

				.item {
					background-color: #f6f6f6;
					color: #888;
					width: 180rpx;
					height: 70rpx;
					border-radius: 35rpx;
					line-height: 70rpx;
					font-size: 28rpx;
					text-align: center;
					padding: 0 20rpx;
					margin-left: 20rpx;
					margin-top: 30rpx;
				}

				.salesTitle {
					color: #333333;
					width: 210rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					text-align: left;
					margin-top: 30rpx;
				}

				.itemEn {
					color: #FFFFFF;
					background-color: #1890FF;
				}

				.text {
					height: 70rpx;
					margin-left: 20rpx;
					margin-top: 30rpx;
					line-height: 70rpx;
				}
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: space-evenly;
			width: 100%;
			padding-bottom: 50rpx;
			// margin-bottom: 50rpx;
			margin-top: 40rpx;
			position: absolute;
			bottom: 0;

			.btn1 {
				border: 1px #1890FF solid;
				width: 250rpx;
				height: 80rpx;
				color: #1890FF;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				border-radius: 40rpx;
			}

			.btn2 {
				background-color: #1890FF;
				width: 250rpx;
				height: 80rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}

	.namecardContainer {
		width: 714rpx;
		// height: 372rpx;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-top: 30rpx;
		margin-left: 18rpx;
		position: relative;

		.tagWrapper {
			position: absolute;
			right: 0;
			top: 0;
			color: #ffffff;
			background-color: #ff0000;
			height: 40rpx;
			padding: 0 10rpx;
			line-height: 40rpx;
			border-radius: 0 20rpx 0 20rpx;
		}

		.stepContainer {
			height: 100rpx;

			.stepWrapper {
				width: 550rpx;
				margin-left: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50rpx;

				.dropWrapperEn {
					border: solid 3rpx #eb6100;
				}

				.dropWrapperDis {
					border: solid 3rpx #7d7d7d;
				}

				.dropWrapper {
					width: 23rpx;
					height: 23rpx;
					background-color: #ffffff;
					position: relative;
					border-radius: 50%;

					.text {
						position: absolute;
						top: 40rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 80rpx;
						font-size: 20rpx;

						text-align: center;
					}

					.textEn {
						color: #eb6100;
					}

					.textDis {
						color: #7d7d7d;
					}
				}

				.lineWrapperEn {
					width: 120rpx;
					height: 3rpx;
					background-color: #eb6100;
				}

				.lineWrapperDis {
					width: 120rpx;
					height: 3rpx;
					background-color: #7d7d7d;
				}
			}
		}

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.avatar {
					width: 98rpx;
					height: 98rpx;
					margin-right: 30rpx;
					border-radius: 50%;
				}

				.wrapper {
					font-size: 28rpx;
					color: #666666;
					line-height: 40rpx;

					.name {
						margin-bottom: 15rpx;

						.myText {
							font-size: 24rpx;
							color: #999999;
						}
					}

					.scanCount {
						margin-bottom: 15rpx;
					}

					.firstWrapper {
						margin-left: 15rpx;
						width: 466rpx;
						// height: 80rpx;
						font-size: 22rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						margin-bottom: 15rpx;
					}
				}
			}

			.right {
				font-size: 32rpx;
				font-weight: 600;
				color: #5E9FFD;
			}

		}

		.middle {
			width: 100%;
			margin-top: 5rpx;
			display: flex;
			align-items: center;

			.left {
				width: 110rpx;
				// height: 40rpx;
				background: #F4F4F4;
				border-radius: 8rpx;
				text-align: center;
				font-size: 24rpx;
				color: #666666;
				line-height: 40rpx;
				margin-right: 30rpx;
			}

			.right {
				width: 466rpx;
				// height: 80rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
			}
		}

		.channelInfoWrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;

			.left {
				width: 500rpx;
			}

			.right {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.bottom {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			// margin-left: 250rpx;
			margin-top: 56rpx;

			.item {
				width: 188rpx;
				height: 66rpx;
				background: rgba(94, 159, 253, 0.06);
				border-radius: 33rpx;
				// opacity: 0.06;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #666666;
				margin-left: 22rpx;

				.icon {
					width: 54rpx;
					height: 54rpx;
					margin-right: 22rpx;
				}
			}
		}

		.bntWrapper {
			display: flex;
			margin-top: 30rpx;
			width: 100%;
			justify-content: flex-end;

			.leftBtn {
				padding: 0 20rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 25rpx;
				border: solid 2rpx #16a5fe;
				font-size: 24rpx;
				color: #16a5fe;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 22rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 5rpx;
				}
			}

			.rightBtn {
				width: 188rpx;
				height: 66rpx;
				background-color: #16a5fe;
				border-radius: 33rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 22rpx;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.commitContainer {
		width: 650rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;

		.item {
			width: 100%;
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1px solid #F3F3F3;

			.left {
				margin-left: 30rpx;
				height: 40rpx;
				width: 130rpx;
				font-size: 28rpx;
				color: #3D3D3D;
				line-height: 40rpx;
				margin-right: 40rpx;
			}

			.middle {
				min-height: 40rpx;
				width: 387rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #333333;
				// word-wrap:break-word;
			}

			.right {
				width: 24rpx;
				height: 24rpx;
			}
		}

		.title {
			// width: 120rpx;
			height: 42rpx;
			font-size: 30rpx;
			color: #1F1F1F;
			line-height: 42rpx;
			margin-top: 48rpx;
			margin-bottom: 18rpx;
		}

		.phone {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 290rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 10rpx;
				box-sizing: content-box;
				color: #333333;
			}

			.rightBorder {
				border: 1rpx solid #BBBABA;
			}

			.rightClick {
				color: #666666;
				background-color: #eeeeee;
				text-align: center;
			}

			.pasteBtn {
				background-color: #1890FF;
				color: #ffffff;
				font-size: 25rpx;
				line-height: 60rpx;
				padding: 0 20rpx;
				height: 60rpx;
				text-align: center;
				margin-left: 15px;
				border-radius: 10rpx;
			}
		}

		.name {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.left {
				font-size: 30rpx;
				color: #999999;
				line-height: 42rpx;
			}

			.right {
				margin-left: 60rpx;
				padding: 0 15rpx;
				width: 400rpx;
				height: 72rpx;
				box-sizing: content-box;
				line-height: 72rpx;
				border-radius: 10rpx;
				border: 1rpx solid #BBBABA;
				color: #333333;
			}
		}

		.btnWrapper {
			display: flex;
			justify-content: center;
			margin-top: 100rpx;
			margin-bottom: 50rpx;

			.btn1 {
				width: 240rpx;
				height: 72rpx;
				border-radius: 37rpx;
				border: 1px solid #BBBABA;
				font-size: 28rpx;
				color: #333333;
				margin-right: 90rpx;
				line-height: 72rpx;
				text-align: center;
			}

			.btn2 {
				width: 240rpx;
				height: 72rpx;
				background: #5E9FFD;
				border-radius: 37rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}
	
	.sortWrapper{
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #1777ff;
		display: flex;
		line-height: 60rpx;
		align-items: center;
	}

	.listContainer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			width: 750rpx;
			height: 0rpx;
		}

		.itemContainer {
			width: 690rpx;
			height: 179rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				margin-left: 24rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			.middle {
				margin-right: 40rpx;

				.top {
					width: 313rpx;
					font-size: 32rpx;
					color: #121212;
					margin-bottom: 14rpx;
				}

				.bottom {
					width: 313rpx;
					font-size: 24rpx;
					;
					line-height: 35rpx;
					color: #999999;
				}
			}

			.btn {
				width: 140rpx;
				height: 56rpx;
				background-color: #ff7927;
				border-radius: 28rpx;
				font-size: 28rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					width: 22rpx;
					height: 22rpx;
					margin-right: 10rpx;
				}
			}
		}
	}


	.updateAllPhone {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.left {}

		.right {
			display: flex;
			align-items: center;

			.phoneContainer {
				font-size: 24rpx;
			}

			.updatePhoneBtnWrapper {
				background-color: #ff7927;
				color: #ffffff;
				font-size: 25rpx;
				height: 50rpx;
				line-height: 50rpx;
				padding: 0 15rpx;
				margin-left: 10rpx;
				border-radius: 10rpx;
			}
		}
	}
</style>